<template>
  <el-container>
    <el-header style="height:auto;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="流程名称">
          <el-input v-model="form.work_name" placeholder="请输入流程名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择状态">
            <el-option label="待开发" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁止" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程描述">
          <el-input
            type="textarea"
            v-model="form.work_desc"
            maxlength="50"
            show-word-limit
            placeholder="请输入流程描述"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main style="margin-top: 10px;">
      <el-row type="flex" justify="center" style="margin:10px 0;">
        <el-col :span="6"><el-button size="mini" @click="work_row++;" type="primary">添加流程</el-button></el-col>
        <el-col :span="6">
          <el-button size="mini" v-if="work_row > 1" @click="work_row--;">删除流程</el-button>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item
              placement="top"
              :color="after_color"
              size="large"
              v-for="i in work_row"
              :key="i"
            >
              <el-row type="flex" justify="center">
                <el-col>
                  <el-select v-model="position[i]" placeholder="请选择职位" @change="getStaff">
                    <el-option
                      v-for="item in position_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select v-model="staff[i]" placeholder="请选择用户">
                    <el-option
                      v-for="item in staff_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item
              placement="top"
              :color="after_color"
              size="large"
              v-for="i in work_row"
              :key="i"
            >
              <el-row>
                <el-col><span style="font-size: 24px;color:#666;">项目经理-李勇</span></el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-main>

    <el-footer>
      <el-row type="flex" justify="center">
        <el-col :span="6"><el-button type="primary" @click="onSubmit">立即创建</el-button></el-col>
        <el-col :span="6"> <el-button>取消</el-button></el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
  import {getCommonSelect} from "@/apilist/public"
export default {
  name: "work_set",
  data(){
    return {
      form: {
        work_name: '',
        state: '',
        work_desc: '',
      },
      position:[],
      staff:[],
      position_list:[
        {label:'项目经理',value:215},
        {label:'采购经理',value:227},
        {label:'出纳',value:225},
      ],
      staff_list:[
        {label:'李勇',value:12},
        {label:'关兴',value:13},
        {label:'谭兆',value:14},
      ],
      after_color:'#909399',
      active_color:'#3a8ee6',
      ready_color:'#fff',
      work_row:1,
    };
  },
  methods:{
    onSubmit() {
      console.log('submit!');
    },
    //通过职位获取员工
    getStaff(val){

    },
    //获取职位
    getPositionList(){
      let param = {type:['position']};
        getCommonSelect(param).then((res)=>{
           this.position_list = res.data.data.position;
      });
    }
  },

  mounted() {
    this.getPositionList();
  }

}
</script>

<style scoped>
.el-timeline-item__timestamp {
  color: #909399;
  line-height: 1;
  font-size: 24px !important;
}
</style>
